<div class="view-body">
    <div class="view-inner">
        <div class="view-cont system-admin-cont system-auth-create">
            <header class="view-cont-hd clearfix">
                <!--页面标题-->
                <a ng-if="vm.type === 'corp'" ui-sref="corp/detail(vm.stateParam)" class="btn btn-default btn-xs btn-back"><i class="fa fa-reply"></i>返回上一级</a>
                <a ng-if="vm.type === 'role'" ui-sref="role" class="btn btn-default btn-xs btn-back"><i class="fa fa-reply"></i>返回上一级</a>
                <!--面包屑-->
                <ol class="breadcrumb">
                    <li ng-if="vm.type === 'corp'">
                        <a ui-sref="corp">组织管理</a>
                    </li>
                    <li ng-if="vm.type === 'corp'" ng-repeat="i in ::vm.breadcrumb track by $index">
                        <span>{{i}}</span>
                    </li>
                    <li ng-if="vm.type === 'role'">
                        <a ui-sref="role">角色管理</a>
                    </li>
                    <li class="active">
                        <strong>指定权限</strong>
                    </li>
                </ol>
            </header>
            <section class="view-cont-bd">
                <div class="row row-pane">
                    <div class="col-sm-8">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h3 class="panel-title">权限列表</h3>
                            </div>
                            <div class="panel-body">
                                <div class="alert alert-info">
                                    授权{{vm.current.type}} : <strong>{{vm.current.typeName}}</strong>
                                </div>
                                <div class="plat-list">
                                    <div class="row">
                                        <div class="col-sm-6">
                                            <ui-select ng-model="vm.platList.selected" on-select="vm.onSelected($item)">
                                                <ui-select-match placeholder="选择或输入系统名">{{$select.selected.platName}}</ui-select-match>
                                                <ui-select-choices repeat="plat in vm.platList | propsFilter: {platName: $select.search}">
                                                    <div ng-bind-html="plat.platName | highlight: $select.search"></div>
                                                </ui-select-choices>
                                            </ui-select>
                                        </div>
                                        <div class="col-sm-6"></div>
                                    </div>
                                </div>
                                <div ui-tree data-drag-enabled="false">
                                    <table class="table-tree" ui-tree-nodes ng-model="vm.treeNode">
                                        <thead>
                                        <tr>
                                            <th style="width: 50%">权限</th>
                                            <th>描述</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr class="empty" ng-if="!vm.treeNode.length && !vm.isLoad">
                                            <td colspan="2"><i class="fa fa-exclamation-circle"></i>选择系统加载数据</td>
                                        </tr>
                                        <tr class="empty" ng-if="vm.isLoad">
                                            <td colspan="2"><i class="fa fa-spin fa-spinner"></i>数据加载中...</td>
                                        </tr>
                                        <tr ui-include-replace data-collapsed="true" ng-repeat="node in vm.treeNode" ui-tree-node ng-include="'nodes_table_renderer.html'"></tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h3 class="panel-title">操作记录</h3>
                            </div>
                            <div class="panel-body">
                                <ul class="list-log" ng-show="vm.addMenuList.length == 0 && vm.delMenuList.length == 0 && vm.addCompList.length == 0 && vm.delCompList.length == 0">
                                    <li class="list-log-item text-center"><i class="fa fa-exclamation-circle"></i>暂无操作记录</li>
                                </ul>
                                <div class="log-list" ng-if="vm.addMenuList.length || vm.delMenuList.length">
                                    <ul class="list-group" ng-if="vm.addMenuList.length">
                                        <li class="list-item-lead list-group-item-success"><i class="fa fa-plus"></i>新增菜单权限：</li>
                                        <li class="list-group-item list-group-item-info" ng-repeat="item in vm.addMenuList track by $index">{{item.menuName}}</li>
                                    </ul>
                                    <ul class="list-group" ng-show="vm.delMenuList.length">
                                        <li class="list-item-lead list-group-item-danger"><i class="fa fa-times"></i>排除菜单权限：</li>
                                        <li class="list-group-item list-group-item-info" ng-repeat="item in vm.delMenuList track by $index">{{item.menuName}}</li>
                                    </ul>
                                    <button class="btn btn-primary btn-xs" type="button" ng-click="vm.save('menu')"><i class="fa fa-check"></i>确定</button>
                                </div>
                                <div class="log-list" ng-if="vm.addCompList.length || vm.delCompList.length">
                                    <ul class="list-group" ng-if="vm.addCompList.length">
                                        <li class="list-item-lead list-group-item-success"><i class="fa fa-plus"></i>新增控件权限：</li>
                                        <li class="list-group-item list-group-item-info" ng-repeat="item in vm.addCompList track by $index">{{item.compName}}</li>
                                    </ul>
                                    <ul class="list-group" ng-if="vm.delCompList.length">
                                        <li class="list-item-lead list-group-item-danger"><i class="fa fa-times"></i>排除控件权限：</li>
                                        <li class="list-group-item list-group-item-info" ng-repeat="item in vm.delCompList track by $index">{{item.compName}}</li>
                                    </ul>
                                    <button class="btn btn-primary btn-xs" type="button" ng-click="vm.save('comp')"><i class="fa fa-check"></i>确定</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
</div>
<script type="text/ng-template" id="nodes_table_renderer.html">
    <tr>
        <td width="50%">
            <div ui-tree-handle class="tree-node tree-node-content">
                <span ng-if="!node.compId" ng-click="vm.toggleCheck('menu',this,node)">
                    <i class="fa fa-square-o" ng-if="!node.hadPriv"></i>
                    <i class="fa fa-check-square" ng-if="node.hadPriv && !node.hasChildren && !node.hadComp"></i>
                    <i class="fa fa-check-square" ng-if="node.hadPriv && node.checkAll"></i>
                    <i class="fa fa-check-square-o" ng-if="node.hadPriv && (node.hasChildren || node.hadComp) && !node.checkAll"></i>
                </span>
                <span ng-if="node.compId" ng-click="vm.toggleCheck('comp',this,node)">
                    <i class="fa fa-square-o" ng-if="!node.hadPriv"></i>
                    <i class="fa fa-check-square" ng-if="node.hadPriv"></i>
                </span>
                <a data-nodrag class="tree-node-handle" href="#" ng-click="vm.toggleNode(this, node, $event)">
                    <span class="fa" ng-class="{'fa-folder': collapsed, 'fa-folder-open': !collapsed, 'fa-file': !node.hasChildren && !node.hadComp, 'fa-cube': node.compId}"></span>
                </a>
                <span class="tree-node-name">{{node.menuName || node.compName}}</span>
                <span ng-show="node.loading"><i class="fa fa-spin fa-spinner"></i></span>
            </div>
        </td>
        <td>{{node.menuDesc || node.compDesc}}</td>
    </tr>
    <tr class="tree-tr" ui-tree-nodes ng-model="node.nodes" ng-class="{hidden: collapsed, 'empty-node': !node.nodes.length}">
        <td colspan="2">
            <table>
                <tr ui-include-replace collapsed="true" ng-repeat="node in node.nodes" ui-tree-node ng-include="'nodes_table_renderer.html'">
                </tr>
            </table>
        </td>
    </tr>
</script>
